<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>电信日志分析系统</title>
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<script type="text/javascript" src="../js/echarts.min.js"></script>
		<script type="text/javascript" src="../js/laydate/laydate.js"></script>
	</head>
	<body>
	
		<div class="container">
			<div class="header">
				<a class="${ia ? 'checked':'' }" href="?tab=app">应用欢迎度</a>
				<a class="${iw ? 'checked':'' }" href="?tab=website">网站表现</a>
				<a class="${iv ? 'checked':'' }" href="?tab=village">小区上网能力</a>
			</div>
			<div class="body">
	
				<div class="toolbar">
					<div class="toolbar-item">
						<span>日期：</span>
						<input id="cdate" value="${d}" readonly="readonly" onclick="laydate({format: 'YYYY-MM-DD'})" /> <!--   -->
					</div>
					<div class="toolbar-item">
						<span>指标：</span>
						<select id="ctype">
							<option value="total" ${it ? 'selected':''} >总流量</option>
							<option value="up" ${iu ? 'selected':''}>上行流量</option>
							<option value="down" ${id ? 'selected':''}>下行流量</option>
						</select>
					</div>
					<div class="toolbar-item">
						<button type="button" onclick="submit()">查询</button>
					</div>
				</div>
	
				<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		    	<div id="main" style="width: 600px;height:400px;margin: 0px auto"></div>
			
			</div>
			<div class="footer">© zhuding</div>
		</div>

    	<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var legends = ${ls};
        var data = ${data};
        
        var title = "${t}";
        
        var option = {
            title: { text: title, left: 'center' },
            tooltip: { trigger: 'item', formatter: '{b} ({d}%)' },
            legend: { type: 'scroll', orient: 'vertical', left: '0', width: '150px', data: legends },
            series: [{
                name: '${sname }', type: 'pie', radius: '50%', left: '180px',
                data: data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        /**
         * 点击查询按钮提交查询条件到后端
         */
        function submit() {
        	console.log("日期是：" + cdate.value);
        	console.log("指标是：" + ctype.value);
        	
        	var prefix = "/zd/index/?tab=app";
        	
        	if (location.href.indexOf("tab=website") > -1) {
        		// 判断当前地址栏上是否有 tab=website，用以确定当前页面是网站表现
        		prefix = "/zd/index/?tab=website";
        	} else if (location.href.indexOf("tab=village") > -1) {
        		// 判断当前地址栏上是否有 tab=village，用以确定当前页面是小区上网能力
        		prefix = "/zd/index/?tab=village";
        	} else {
        		// 当前地址栏上是否有 tab=app，用以确定当前页面是应用欢迎度
        	}
        	
        	location.href = prefix + "&date=" + cdate.value + "&type=" + ctype.value;
        }
    </script>
	</body>
</html>